<template>
  <div class="change-container">
    <!--修改登录密码内容-->
    <div class="change-account" v-if="!isChangePasswordSuccess">
      <div class="change-account-title">{{$t('message.changeLoginPassword')}}</div>
      <div class="change-account-label">
        <label for="oldLoginPassword">{{$t('message.oldPassword')}}:</label>
      </div>
      <div class="change-account-input">
        <input type="password" id="oldLoginPassword" ref="oldPasswordInput" v-model="oldLoginPassword" :placeholder="this.$t('message.oldPasswordHolder')" />
      </div>
      <div class="change-account-error" v-if="oldPasswordError">
        {{ oldPasswordErrorTxt }}
      </div>
      <div class="change-account-error" v-if="isOldLoginPasswordError">
        <div class="change-account-error-text">
          {{$t('message.oldPasswordError')}}
        </div>
        <div class="change-account-findPwd">
          <router-link to="/find">{{$t('message.forgetPwd')}}&gt;</router-link>
        </div>
      </div>
      <div class="change-account-label change-account-label-middle">
        <label for="newLoginPassword">{{$t('message.newLoginPassword')}}:</label>
      </div>
      <div class="change-account-input">
        <input type="password" id="newLoginPassword" ref="newLoginPasswordInput" v-model="newLoginPassword" :placeholder="this.$t('message.newLoginPasswordHolder')" />
      </div>
      <div class="change-account-error" v-if="isPasswordSame">
        <div class="change-account-error-text">
          <!--{{$t('message.passwordSameError')}}-->
          {{ passwordSameError }}
        </div>
      </div>
      <div class="change-account-label change-account-label-middle">
        <label for="reNewLoginPassword">{{$t('message.newLoginPassword')}}:</label>
      </div>
      <div class="change-account-input">
        <input type="password" id="reNewLoginPassword" v-model="reNewLoginPassword" :placeholder="this.$t('message.newLoginPassword')" />
      </div>
      <div class="change-account-error" v-if="rePasswordSame">
        <div class="change-account-error-text">
          <!--{{$t('message.passwordSameError')}}-->
          {{ rePasswordSameError }}
        </div>
      </div>
      <div class="change-account-btn-group">
        <button type="button" class="btn-item btn-confirm" :disabled="isDisabledBtn" @click="changePassword">{{$t('message.yes')}}</button>
        <button type="button" class="btn-item btn-cancle" @click="closeDialog">{{$t('message.no')}}</button>
      </div>
    </div>
    <!--修改登录密码成功-->
    <div class="change-success" v-else>
      <div class="success-close" @click="closeDialog"></div>
      <div class="change-success-icon"></div>
      <div class="change-success-title">
        {{$t('message.changePasswordSuccess')}}！
      </div>
      <div class="change-success-tip">
        {{ delayTime }}{{$t('message.backToLogin')}}
      </div>
    </div>
  </div>
</template>

<script>
import { delCookie } from '@/util/util'

export default {
  name: 'PersonalAccountChangePassword',
  data () {
    return {
      oldLoginPassword: '',
      newLoginPassword: '',
      reNewLoginPassword: '',
      oldPasswordError: false,
      isOldLoginPasswordError: false,
      isChangePasswordSuccess: false,
      isPasswordSame: false,
      isNewPasswordNotSame: false,
      rePasswordSame: false,
      delayTime: 3,
      oldPasswordStatus: 0,
      isPasswordSameStatus: 0,
      rePasswordSameStatus: 0
    }
  },
  watch: {
    oldLoginPassword (val) {
      clearTimeout(this.oldPasswordTimer)
      this.oldPasswordTimer = setTimeout(() => {
        if (/^\s*$/g.test(val)) {
          this.oldPasswordStatus = 2
          this.oldPasswordError = true
        } else {
          this.oldPasswordStatus = 1
          this.oldPasswordError = false
        }
      }, 900)
    },
    newLoginPassword (val) {
      clearTimeout(this.newLoginPasswordTimer)
      this.newLoginPasswordTimer = setTimeout(() => {
        if (!/^.{6,16}$/.test(val)) {
          this.isPasswordSameStatus = 2
          this.isPasswordSame = true
        } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(val)) {
          this.isPasswordSameStatus = 3
          this.isPasswordSame = true
        } else {
          this.isPasswordSameStatus = 1
          this.isPasswordSame = false
        }
      }, 900)
    },
    reNewLoginPassword (val) {
      clearTimeout(this.reNewLoginPasswordTimer)
      this.reNewLoginPasswordTimer = setTimeout(() => {
        if (!/^.{6,16}$/.test(val)) {
          this.rePasswordSameStatus = 2
          this.rePasswordSame = true
        } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(val)) {
          this.rePasswordSameStatus = 3
          this.rePasswordSame = true
        } else if (val !== this.newLoginPassword) {
          this.rePasswordSameStatus = 4
          this.rePasswordSame = true
        } else {
          this.rePasswordSameStatus = 1
          this.rePasswordSame = false
        }
      }, 900)
    }
  },
  computed: {
    oldPasswordErrorTxt () {
      switch (this.oldPasswordStatus) {
        case 2:
          return this.$t('message.oldPasswordHolder')
        case 3:
          return this.$t('message.oldPasswordError')
      }
    },
    passwordSameError () {
      switch (this.isPasswordSameStatus) {
        case 2:
          return this.$t('message.registerError8')
        case 3:
          return this.$t('message.registerError9')
      }
    },
    rePasswordSameError () {
      switch (this.rePasswordSameStatus) {
        case 2:
          return this.$t('message.registerError8')
        case 3:
          return this.$t('message.registerError9')
        case 4:
          return this.$t('message.newPasswordNotSameError')
        case 5:
          return this.$t('message.passwordSameError')
      }
    },
    isDisabledBtn () {
      if (this.oldPasswordStatus === 1 && this.isPasswordSameStatus === 1 && this.rePasswordSameStatus === 1) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    changePassword () {
      if (this.oldPasswordStatus === 1 && this.isPasswordSameStatus === 1 && this.rePasswordSameStatus === 1) {
        this.$ajax.changePwd(this.oldLoginPassword, this.reNewLoginPassword).then((res) => {
          if (res.code === 200) {
            this.isChangePasswordSuccess = true
            this.userQuit()
            this.toLoginPage()
          } else if (res.code === 201) {
            this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
          } else if (res.code === 202) {
            this.rePasswordSameStatus = 5
            this.rePasswordSame = true
          } else if (res.code === 203) {
            this.oldPasswordStatus = 3
            this.oldPasswordError = true
            this.$refs.oldPasswordInput.focus()
          }
        })
      }
    },
//    退出用户
    userQuit () {
      this.$ajax.loginOut().then((res) => {
        delCookie('username')
        delCookie('profile')
        delCookie('unreadMsg')
        this.$store.commit('clearLoginUser')
      })
    },
    closeDialog () {
      this.$emit('close')
    },
    // 跳转到登录页面
    toLoginPage () {
      this.delayTimer = setInterval(() => {
        if (this.delayTime <= 0) {
          clearInterval(this.delayTimer)
          this.$router.push({ path: '/login' })
        } else {
          this.delayTime -= 1
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.change-container {
  background-color: #fff;
}

.change-account {
  width: 416px;
  padding: 40px;
}

.change-account-title {
  height: 28px;
  line-height: 28px;
  font-size: 20px;
  color: #333;
  text-align: center;
}

.change-account-label {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #333;
  margin-top: 40px;
}

.change-account-label-middle {
  margin-top: 24px;
}

.change-account-input {
  width: 416px;
  height: 48px;
  margin-top: 12px;
}

.change-account-input input {
  width: 384px;
  height: 46px;
  border: 1px solid #d7d7d7;
  border-radius: 2px;
  font-size: 14px;
  color: #333;
  padding: 0 15px;
}

.change-account-error {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #ff600a;
  padding-left: 24px;
  margin-top: 12px;
  background: url(../../../assets/images/icon_errorTips.png) no-repeat left center;
  overflow: hidden;
}

.change-account-error-text {
  float: left;
}

.change-account-findPwd {
  float: right;
}

.change-account-findPwd a {
  color: #ff600a;
}

.change-account-btn-group {
  margin-top: 40px;
  font-size: 0;
}
.change-account-btn-group button:disabled {
  cursor: not-allowed;
}

.change-account-btn-group .btn-item {
  width: 200px;
  height: 48px;
  border-radius: 2px;
  font-size: 16px;
  cursor: pointer;
}

.change-account-btn-group .btn-confirm {
  border: 1px solid #ff600a;
  background-color: #ff600a;
  color: #fff;
  margin-right: 16px;
}

/*.change-account-btn-group .btn-confirm:hover {*/
  /*background-color: #ff3c00;*/
/*}*/

.change-account-btn-group .btn-confirm:active {
  background-color: #e83700;
}

.change-account-btn-group .btn-cancle {
  border: 1px solid #d7d7d7;
  background-color: #fff;
  color: #a5a5a5;
}

.change-success {
  width: 480px;
  padding: 60px 0;
  position: relative;
}

.success-close {
  width: 16px;
  height: 16px;
  background: url(../../../assets/images/icon_close.png) no-repeat;
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}

.change-success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  background: url(../../../assets/images/icon_success.png) no-repeat center;
}

.change-success-title {
  height: 26px;
  line-height: 26px;
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-top: 24px;
}

.change-success-tip {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #747474;
  text-align: center;
  margin-top: 12px;
}
</style>
